<template>
  <view class="empty-state">
    <image :src="image" mode="aspectFit" class="empty-image"></image>
    <text class="empty-text">{{ text }}</text>
    <view class="empty-button" v-if="buttonText" @click="handleClick">
      {{ buttonText }}
    </view>
  </view>
</template>

<script>
export default {
  name: "EmptyState",
  props: {
    image: {
      type: String,
      default: '/static/images/empty.png'
    },
    text: {
      type: String,
      default: '暂无数据'
    },
    buttonText: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>

<style lang="scss">
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 30rpx;
  }
  
  .empty-button {
    padding: 16rpx 40rpx;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
  }
}
</style> 